<script setup>
import { request } from '@renderer/utils'
import { add, del, get } from '../../hooks/useDb'
const { shell } = require('electron')
const fs = require('node:fs')

const libraryList = ref([])
const addShow = ref(false)

const getAll = () => get('library').then((result) => ((libraryList.value = result || []), (addShow.value = true)))

onMounted(() => {
  getAll()
})

const addLibraryDir = () => {
  request('selectDir').then(([path] = []) => {
    if (!path) return
    // const list = fs.readdirSync(path, { withFileTypes: true, recursive: true })
    // let size = 0
    // list.map((_) => {
    //   const res = fs.statSync(`${_.parentPath}\\${_.name}`)
    //   size += res.size
    // })
    add('library', { path }).then(() => {
      getAll()
    })
  })
}

const openPath = ({ path }) => {
  request('openPath', path)
}

const deletePath = ({ id }) => {
  del('library', id).then(() => {
    getAll()
  })
}
</script>

<template>
  <PageLayout>
    <!-- <template #title-bar>
      <ripple-button nd raised rounded icon="pi pi-plus" size="small" label="添加目录" @click="addLibraryDir" />
    </template> -->
    <TransitionGroup tag="div" name="fade" class="position-relative" style="transition: all 0.5s">
      <div v-for="library in libraryList" :key="library.id" style="width: 100%; height: 3rem" class="mb-2">
        <v-hover v-slot="{ isHovering, props }">
          <div
            v-bind="props"
            class="py-2 px-4 rounded-lg d-flex justify-center align-center"
            :class="`elevation-${isHovering ? 5 : 1}`"
            style="background-color: #252525; transition: all 0.2s"
          >
            <span class="flex-fill"> {{ library.path }}</span>
            <v-btn variant="text" size="x-small" class="mr-1" icon="pi pi-eye" @click="openPath(library)" />
            <v-btn variant="text" size="x-small" color="#E57373" icon="pi pi-times-circle" @click="deletePath(library)" />
          </div>
        </v-hover>
      </div>
      <div v-if="addShow" key="add">
        <v-hover v-slot="{ isHovering, props }">
          <div
            v-ripple
            v-bind="props"
            class="py-2 px-4 rounded-lg mb-2 d-flex justify-center align-center cursor-pointer"
            :class="`elevation-${isHovering ? 5 : 1}`"
            style="background-color: #252525; transition: all 0.2s; min-height: 3rem; font-size: 3rem"
            @click="addLibraryDir"
          >
            <i class="pi pi-plus"></i>
          </div>
        </v-hover>
      </div>
    </TransitionGroup>
  </PageLayout>
</template>

<style lang="css" scoped>
/* 1. 声明过渡效果 */
.fade-move,
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}

/* 2. 声明进入和离开的状态 */
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scaleY(0.01) translate(30px, 0);
}

/* 3. 确保离开的项目被移除出了布局流
      以便正确地计算移动时的动画效果。 */
.fade-leave-active {
  position: absolute;
}
</style>
